import React from 'react'
/**
 * 1. 在pages 文件夹中创建 News/index.js 组件
 * 2. 在Home 组件中，添加一个 Router 作为子路由（嵌套的路由）的出口
 * 3. 设置嵌套路由的 path， 格式以父路由 path 开头（父组件展示，子组件才会展示）
 */
// 导入路由
import { Route } from 'react-router-dom'
// 导入 TabBar 组件
import { TabBar } from 'antd-mobile'
// 导入内部组件样式
import './index.css'
// 导入News组件
import News from '../News'
import Index from '../Index'
import HouseList from '../HouseList'
import Profile from '../Profile'


// TabBar 数据
const tabItems = [
  {
    title: '首页',
    icon: 'icon-ind',
    path: '/home',
  },
  {
    title: '找房',
    icon: 'icon-findHouse',
    path: '/home/list',
  },
  {
    title: '资讯',
    icon: 'icon-infom',
    path: '/home/news',
  },
  {
    title: '我的',
    icon: 'icon-my',
    path: '/home/profile',
  },
]
export default class Home extends React.Component {
  // 初始化状态
  state = {
    // 控制默认选中tab菜单项
    selectedTab: this.props.location.pathname,
  }
  // 页面钩子函数
  componentDidUpdate(prevProps) {
    // console.log('钩子函数', prevProps)
    // console.log('钩子函数', this.props)
    // 此时说明路由发生切换了
    if (prevProps.location.pathname !== this.props.location.pathname) {
      this.setState({
        selectedTab: this.props.location.pathname,
      })
    }
  }
  //   渲染TabBar.Item的方法
  renderTabBarItem() {
    return tabItems.map((item) => (
      <TabBar.Item
        title={item.title}
        key={item.title}
        icon={<i className={`iconfont ${item.icon}`} />}
        selectedIcon={<i className={`iconfont ${item.icon}`} />}
        selected={this.state.selectedTab === item.path}
        onPress={() => {
          this.setState({
            selectedTab: item.path,
          })
          //   路由切换
          this.props.history.push(item.path)
        }}
      ></TabBar.Item>
    ))
  }
  render() {
    return (
      <div className="home">
        {/* 渲染子路由 */}
        <Route exact path="/home" component={Index}></Route>
        <Route path="/home/news" component={News}></Route>
        <Route path="/home/list" component={HouseList}></Route>
        <Route path="/home/profile" component={Profile}></Route>
        {/* TabBar */}
        <TabBar
          unselectedTintColor="#888"
          tintColor="#21b97a"
          barTintColor="white"
          noRenderContent={true}
        >
          {/* 调用TabBar.Item的方法 */}
          {this.renderTabBarItem()}
        </TabBar>
      </div>
    )
  }
}
